<template>
  <div class="teacherDetails">
    <GoBack :title="title" />
    <el-card>
      <div class="teacherDetails-header">
        <el-image
          :src="avatar"
          style="
            width: 80px;
            height: 80px;
            border-radius: 40px;
            margin-right: 50px;
          "
        >
          <!-- 占位图 -->
          <template #placeholder>
            <div class="image-slot">Loading<span class="dot">...</span></div>
          </template>
        </el-image>
        <div style="">{{ nickName }}</div>
        <div style="margin-left: 50px">手机号：{{ mobile }}</div>
      </div>
    </el-card>
    <el-card style="margin-top: 20px">
      <el-tabs v-model="activeName">
        <el-tab-pane label="当前所授班级" name="first">
          <el-table border :data="firstTableDatas">
            <el-table-column label="序号" width="55" align="center">
              <template #default="scope">
                <span>{{
                  (firstParams.pageNum - 1) * firstParams.pageSize +
                  scope.$index +
                  1
                }}</span>
              </template></el-table-column
            >
            <el-table-column
              label="班级名称"
              align="center"
              prop="name"
            ></el-table-column>
            <el-table-column
              label="关联课程"
              align="center"
              prop="courseName"
            ></el-table-column>
            <el-table-column
              label="人数"
              align="center"
              prop="studentNum"
            ></el-table-column>
          </el-table>
          <pagination
            v-show="firstTotal > 0"
            :total="firstTotal"
            v-model:page="firstParams.pageNum"
            v-model:limit="firstParams.pageSize"
            @pagination="getTeacherClass"
          />
        </el-tab-pane>
        <el-tab-pane label="上课记录" name="second">
          <el-table v-loading="loading" :data="secondTableDatas" border>
            <el-table-column label="序号" width="55" align="center">
              <template #default="scope">
                <span>{{
                  (secondParams.pageNum - 1) * secondParams.pageSize +
                  scope.$index +
                  1
                }}</span>
              </template></el-table-column
            >
            <el-table-column
              label="点名时间"
              align="center"
              prop="callTime"
              width="160"
            >
              <template #default="scope">
                {{
                  scope.row.callTime &&
                  scope.row.callTime.slice(0, 10) +
                    "    " +
                    scope.row.callTime.slice(11, 19)
                }}
              </template>
            </el-table-column>
            <el-table-column label="班级名称" align="center" prop="className" />
            <el-table-column
              label="授课课程"
              align="center"
              prop="courseNameC"
            />
            <el-table-column
              label="上课时间"
              align="center"
              prop="classDate"
              width="240"
            >
              <template #default="scope">
                {{
                  scope.row.weekNum
                    ? scope.row.classDate.slice(0, 10) +
                      "(周" +
                      {
                        1: "一",
                        2: "二",
                        3: "三",
                        4: "四",
                        5: "五",
                        6: "六",
                        7: "日",
                      }[scope.row.weekNum] +
                      ")" +
                      "  " +
                      scope.row.classStartTime +
                      "~" +
                      scope.row.classEndTime
                    : scope.row.classDate.slice(0, 10) +
                      "  " +
                      scope.row.classStartTime +
                      "~" +
                      scope.row.classEndTime
                }}
              </template>
            </el-table-column>
            <el-table-column
              label="主班老师"
              align="center"
              prop="teacherName"
            />
            <el-table-column
              label="助教老师"
              align="center"
              prop="assistantName"
              width="160"
            />
            <el-table-column label="授课课时" align="center" prop="classHour" />
            <el-table-column label="实到人数" align="center" prop="callNum">
              <template #default="scope">
                {{ scope.row.callNum + "/" + scope.row.totalNum }}
              </template>
            </el-table-column>
            <el-table-column
              label="上课内容"
              align="center"
              prop="description"
            />
            <el-table-column
              label="操作"
              align="center"
              width="100"
              class-name="small-padding fixed-width"
            >
              <template #default="scope">
                <el-button link type="primary" @click="handleDetail(scope.row)">
                  详情
                </el-button>
                <!-- <el-button link type="primary" @click="handleComment(scope.row)">
            课后点评
          </el-button> -->
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="secondTotal > 0"
            :total="secondTotal"
            v-model:page="secondParams.pageNum"
            v-model:limit="secondParams.pageSize"
            @pagination="getRollCallList"
            size="small"
          />
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <RecordDetail
      ref="recordRef"
      :form="form"
      :classTitle="selectedItem.className"
      :orderNo="selectedItem.orderNo"
      :classId="selectedItem.classId"
      :courseFilterIds="selectedItem.courseIds"
      :isVip="selectedItem.isVip"
      @refreshPage="getList"
    />
  </div>
</template>
<script setup>
import GoBack from "@/components/GoBack/index.vue";
import { onMounted, reactive, ref, toRefs } from "vue";
import { useRoute } from "vue-router";
import { getTeacherClassApi } from "@/api/registrar/teacher.js";
import { getRollCallListAPI } from "@/api/registrar/class.js";
import { getStaffInfoApi } from "@/api/institution/staff.js";
import RecordDetail from "@/views/registrar/class/detail/components/recordDetail.vue";

const { proxy } = getCurrentInstance();

const route = useRoute();
const teacherId = route.params.teacherId;
const title = route.meta.title;

const activeName = ref("first");

const avatar = ref("");
const nickName = ref("");
const mobile = ref("");

const firstTableDatas = ref([]);
const firstTotal = ref(0);

const secondTableDatas = ref([]);
const secondTotal = ref(0);

// 详情
const recordRef = ref(null);
const selectedItem = ref({});

const data = reactive({
  firstParams: {
    pageNum: 1,
    pageSize: 10,
  },
  secondParams: {
    pageNum: 1,
    pageSize: 10,
    listType: "1",
  },
});

const { firstParams, secondParams } = toRefs(data);

// 根据教师id获取教师信息
const getTeacherInfo = (async) => {
  getStaffInfoApi(teacherId).then((res) => {
    avatar.value = import.meta.env.VITE_APP_BASE_API + res.data.avatar;
    nickName.value = res.data.nickName == null ? "未命名" : res.data.nickName;
    mobile.value = res.data.mobile;
  });
};

// 获取当前授课班级
const getTeacherClass = async () => {
  const { total, rows } = await getTeacherClassApi({
    teacherId: teacherId,
    ...firstParams.value,
  });
  firstTableDatas.value = rows;
  firstTotal.value = total;
};

// 获取上课记录
const getRollCallList = async () => {
  const { total, rows } = await getRollCallListAPI({
    teacher: teacherId,
    ...secondParams.value,
  });
  secondTableDatas.value = rows;
  secondTotal.value = total;
};

// 详情
function handleDetail(row) {
  selectedItem.value = row;
  nextTick(function () {
    recordRef.value.getRollCallDetail(row);
  });
}

// 初始化请求
onMounted(async () => {
  // 获取教师信息
  await getTeacherInfo();
  // 获取当前所授班级
  await getTeacherClass();
  // 获取上课记录
  await getRollCallList();
});
</script>
<style lang="scss" scoped>
.teacherDetails {
  width: 100%;
  // height: 100%;
}
.teacherDetails-header {
  width: 100%;
  height: 100px;
  // border: 1px solid #f5f5f5;
  display: flex;
  align-items: center;
  padding: 40px;
  box-sizing: border-box;
  // justify-content: space-between;
}
</style>
